<template>
  <div>

	<myheader></myheader>

	<br><br>

	<Breadcrumb :datas="datas"></Breadcrumb>
	

	<section class="featured-block text-center">
		<div class="container">
			
		<div>
			用户名：<input type="text" v-model="username">
		</div>

		<br><br>
		
		<div>
			密码：<input type='password' v-model="password">
		</div>

		<br><br>

		<div>
			<br>
			验证码:<input type="text" v-model="code">
		</div>

		<br><br>

		<img :src="codeurl" style="width:120px; height:40px;cursor:pointer;" @click="updatecode">

		<br><br>

		<!-- ui专属控件 -->
		<Button @click="submit">提 交</Button>
		

		</div>
	</section>
	
	<myfooter></myfooter>
	
	
	
    
  </div>
  
</template>


 
<script>
//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{'home':'index'}},{title:'注册页面'}],

	  msg: "这是一个变量",
	  username:'',
	  password:'',
	  code:'',
	  codeurl:'http://localhost:8000/code/',
    }
  },




//定义组件
components:{
	'myheader':myheader,
	'myfooter':myfooter,
},


  mounted:function(){
	
   
  
},


  methods:{
	  //提交事件
	submit:function(){

		//判断用户是否输入
		if(this.username == ''){
			// this.$message('用户名不能为空')

			alert('用户名不能为空')
			return false;
		}

		//判断密码是否为空
		if(this.password == ''){
			alert('密码不能为空')
			return false;
		}

		//判断验证码是否为空
		if(this.code == ''){
			alert('验证码不能为空')
			return false;
		}



		//请求后台接口
		this.axios.get('http://localhost:8000/register/',{params:{username:this.username,
		password:this.password,code:this.code}}).then((res)=>{
			console.log(res);
			
			if(res.data.code==200){
				alert(res.data.message)
				this.$router.push('/login')
			}else{
				alert(res.data.message)
			}
			
		})
	},

	//点击切换验证码
	updatecode:function(){
		this.codeurl = "http://localhost:8000/code/?random=" + Math.random()
	}




  }
}


</script>
 
<style>



</style>